<template>
	<view>
		<myshop :nonotice="shopstate"></myshop>
		<view class="list">
			<view class="lists" v-for="item in arr">
				<view>
					<view>
						<view>订单号:{{item.order}}</view>
						<view v-if="item.start==0">待付款</view>
						<view v-if="item.start==1">待发货</view>
						<view v-if="item.start==2">待收货</view>
					</view>
					<view>
						<view>
							<image :src="item.image" mode=""></image>
						</view>
						<view class="left">{{item.commodity}}</view>
						<view style="margin-left:auto ;">x{{item.num}}</view>
					</view>
					<view>
						<view>{{item.day}}</view>
						<view class="red">￥{{item.money}}</view>
					</view>
					<view>
						<u-button v-if="item.start==0" type="success"  size="mini" class="btn">立刻支付</u-button>
						<u-button v-if="item.start==1" type="warning" :plain="true" size="mini" class="btn">提醒发货</u-button>
						<u-button v-if="item.start==2" :plain="true" size="mini" class="btn">立即评价</u-button>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import myshop from '../../components/myshop/myshop.vue'
	export default {
		components: {
			myshop
		},
		data() {
			return {
				shopstate: ['全部', '待付款', '待发货', '待收货', '待评价'],
				arr: [{
						id: 0,
						order: 1543515,
						start: 0,
						image: '../../static/my/@1x图片.png',
						commodity: '蓝月亮洗衣液',
						num: 1,
						day: '2021年3月1日',
						money: '65.2'
					},
					{
						id: 0,
						order: 1543515,
						start: 1,
						image: '../../static/my/@1x图片.png',
						commodity: '洗衣粉',
						num: 1,
						day: '2021年3月1日',
						money: '65.2'
					},
					{
						id: 0,
						order: 1543515,
						start: 2,
						image: '../../static/my/@1x图片.png',
						commodity: '洗衣粉',
						num: 1,
						day: '2021年3月1日',
						money: '65.2'
					},
				]
			};
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.lists {
		width: 90%;
		height: 294rpx;
		background-color: #FFFFFF;
		margin: 0 auto;
		border-radius: 30rpx;
	}

	.lists>view {
		margin-top: 20rpx;
	}

	.lists>view>view {
		padding-top: 10rpx;
		display: flex;
		justify-content: space-between;
		width: 90%;
		margin: 0 auto;
	}

	.lists>view>view:nth-child(1) {
		height: 50rpx;
		line-height: 50rpx;
		border-bottom: 2rpx solid #BBBBBB;
		padding-bottom: 46rpx;
	}

	.lists>view>view:nth-child(2) {
		height: 120rpx;
		line-height: 100rpx;
	}

	.lists>view>view:nth-child(3) {
		height: 40rpx;
		line-height: 40rpx;
	}

	.lists>view>view:nth-child(4) {
		height: 20rpx;
		line-height: 20rpx;
		margin-left: auto;
	}

	.lists>view image {
		width: 100rpx;
		height: 100rpx;
	}

	.left {
		margin-left: 20rpx;
	}

	.red {
		color: red;
	}

	.btn {
		margin-top: 10rpx;
		margin-left: auto;
	}
</style>
